import React        from 'react';
import { Link }     from 'react-router-dom';

import MUtil        from 'util/mm.jsx';
import Order        from 'service/order-service.jsx';

import PageTitle    from 'component/page-title/index.jsx';
import ListSearch   from './index-list-search.jsx';
import TableList    from 'util/table-list/index.jsx';
import Pagination   from 'util/pagination/index.jsx'


const __mm      = new MUtil();
const __order   = new Order();

class OrderList extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      list        : [],     // list 存放数据
      pageNum     : 1,      // 存放页码
      listType    : 'list'  // 表示是 list 还是 search
    };
  }

  // 调用 loadUserList 的生命函数
  componentDidMount(){
    this.loadOrderList();
  }

  // 加载商品列表( 和 搜索后的列表)
  loadOrderList(){
    let listParam = {};
    // 不管是搜索 还是 请求列表，下面两个参数都是必须的
    listParam.listType  = this.state.listType;
    listParam.pageNum   = this.state.pageNum;

    // 判断是在搜索 还是 没有在搜索
    // 如果请求的是 搜索接口的话，需要传入 搜索类型 和 搜索关键字
    if(this.state.listType === 'searchType'){
      listParam.orderNo = this.state.orderNumber
    }
    // 请求接口
    __order.getOrderList(listParam).then(res => {
      this.setState(res)
    }, errMsg => {
      // 假如接口请求错误的话，我们应该把原来的数据删掉
      this.setState({
        list: []
      });
      __mm.errorTips(errMsg);
    });
  }
  
  // 搜索功能
  onSearch(orderNumber){
    let listType = orderNumber === '' ? 'list' : 'searchType';
    this.setState({
      listType      : listType,
      pageNum       : 1,
      orderNumber   : orderNumber
    }, () => {
      this.loadOrderList();
    })
  }

  // 当分页页面的页数发生变化的时候
  // setState 是一个异步函数
  onPageNumChange(pageNum){
    this.setState({
      pageNum : pageNum
    }, () => {
      this.loadOrderList();
    });
  }

  // new Data(user.createTime).toLocaleString() 这就将其转化为了当地的一个时间
  render(){
    let tableHeads = ['订单号', '收件人', '订单状态', '订单总价', '创建时间', '操作'];
    return (
      <div id="page-wrapper">
        <PageTitle title="订单列表" />
        <ListSearch onSearch={(orderNumber) => {this.onSearch(orderNumber)}} />
        <TableList tableHeads={tableHeads}>
          {
            this.state.list.map((order, index) => {
              return (
                <tr key={index}>
                  <td>
                    <Link to={ `/order/detail/${order.orderNo}` }>{order.orderNo}</Link>
                  </td>
                  <td>{order.receiverName}</td>
                  <td>{order.statusDesc}</td>
                  <td>¥{order.payment}</td>
                  <td>{order.createTime}</td>
                  <td>
                    <Link to={ `/order/detail/${order.orderNo}` }>详情</Link>
                  </td>
                </tr>
              );
            })
          }
        </TableList>
        <Pagination
          current={this.state.pageNum}
          total={this.state.total}
          onChange={(pageNum) => {this.onPageNumChange(pageNum)}}
        />
      </div>
    );
  }
}

export default OrderList;